.container{
    width: 1000px;
    height: 600px;
    outline: 1px solid red;
    margin:100px auto;
    /* 开启弹性布局 */
    display: flex;
    /* 主轴是x轴 */
    /* flex-direction: row; */
    /* flex-direction: row-reverse; */
    /* 主轴是y轴 */
    /* flex-direction: column; */
    /* flex-direction: column-reverse; */
    /* 如果不换行，元素的总宽度超过容器的宽度则会均等的压缩项目是所有项目拍成一行 */
    /* flex-wrap: wrap; */
    /* flex-flow:row wrap ; */
    justify-content: space-around ;
    /* 默认值，如果项目没有设定高度，那么项目将被拉伸到和容器一样高 */
    /* 项目是一行的情况下，处理项目在交叉轴(Y轴)的对齐 */
    /* align-items: stretch; */
    /* align-items: flex-start; */
    /* align-items: baseline; */
    /* 项目是多行的情况下，处理项目在交叉轴(Y轴)的对齐 */
    /* align-content:space-around  */
    /* align-content: stretch; */
    align-items: center;
}
.item{
    width: 200px;
    height: 200px;
    background-color: rgb(186, 241, 178);
    outline: 1px solid black;
    /* 定义元素如何分配剩余空间，如果不存在剩余空间在该属性无效果 */
    /* flex-grow: 1; */
    /* 200px/4 = 50px */
    /* 当主轴方向是x轴相当于宽度，但是优先级高于宽度 */
    flex-basis: 300px;
    
}
.item:first-child{
    /* flex-grow:4 */
    /* flex-shrink: 3; */
}
.item:nth-child(2){
    /* flex-grow: 1; */
    align-self: flex-start;
}
.item:nth-child(4){
    font-size: 3em;
}
.item:nth-child(7){
    /* order:-1 */
}
.item:first-child{
    /* order: 1; */
}

/* 压缩的空间 *1600px-1000px = 600px/ 
600/10 = 60px